<template>
    <div class="summary-bar row">

       <div class="col-medium-1-3" v-for="summary in summaryData">
           <Panel class="summary-bar__panel">
               <div v-for="(data, key, index) in summary" v-bind:class="index == 0 ? 'left': 'right'">
                   <p class="summary-bar__title">{{key}}</p>
                   <p class="summary-bar__data">{{data}}</p>
               </div>
           </Panel>
       </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import Panel from './Panel.vue'

    export default {
        data() {
            return {

            }
        },
        components: {
          Panel
        },

        mounted: function() {
            var self = this;

        },
        props: [
            "summaryData"
        ]


    }
</script>